<template>
  <el-col :span="4">
    <el-dropdown  @command="handleCommand" trigger="click" placement="bottom">
      <el-card class="el-dropdown-link box-card two-card">
        {{ title }}
      </el-card>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="2023" v-show="title!=='2023'">
          2023
        </el-dropdown-item>
        <el-dropdown-item command="2024" v-show="title!=='2024'">
          2024
        </el-dropdown-item>

        <el-dropdown-item command="2025" v-show="title!=='2025'">
          2025
        </el-dropdown-item>

        <el-dropdown-item command="2026" v-show="title!=='2026'">
          2026
        </el-dropdown-item>

      </el-dropdown-menu>
    </el-dropdown>
  </el-col>
</template>

<script>
export default {
  name: 'MiddleAssembly',
  data () {
    return {
      title: ''
    }
  },
  created () {
    this.title = String(new Date().getFullYear())
  },
  watch: {
    title (newValue) {
      document.title = `Plan - ${newValue}`
      this.$emit('getTitle', newValue)
    }
  },
  methods: {
    handleCommand (command) {
      this.title = command
    }
  }
}
</script>
